<template>
  <div class="document-items">
    <div class="document-item" @mouseleave.stop="getMissDropMenu">
      <div class="item-top">
        <div class="top-left">
          <svg-icon :icon-class="selectSvgIcons(template)"></svg-icon>
          <!-- <svg-icon :icon-class="getFileType(thumbnailBase64 ? template.suffix : template.fileType)"></svg-icon> -->
          <span class="top-title">{{ thumbnailBase64 ? template.realName : template.formName }}</span>
        </div>
      </div>

      <!-- <el-image
        v-if="template.imageStorage || template.thumbnailBase64"
        class="item-img"
        fit="cover"
        :src="template.type == 'richText' ? proxy.$yuUtils.imgSrc(template.imageStorage) : proxy.$yuUtils.imgSrc(template.thumbnailBase64)"
      /> -->

      <!-- <div v-else class="iconBox"> -->
      <div class="iconBox">
        <!-- <svg-icon :icon-class="getFileType(thumbnailBase64 ? template.suffix : template.fileType)" class="iconClass"></svg-icon> -->
        <svg-icon :icon-class="selectSvgIcons(template)" class="iconClass"></svg-icon>
      </div>

      <div class="item-bottom">
        <div class="item-bottom-text">
          <div class="bottom-text">浏览次数：{{ template.previews || template.templatePreviews || template.preview || 0 }}</div>

          <!-- <div v-if="isActived != -2" class="bottom-department">
              所属部门: <span class="bottom-department-text">{{template.deptName}}</span>
            </div> -->
        </div>
        <div class="item-bottom-btn item-bottom-btn-hover">
          <el-button @click="preview(template)" class="btn-preview"> 预览 </el-button>
          <el-button @click="getUse(template)" class="btn-use"> 使用 </el-button>
        </div>
        <!-- </transition> -->
      </div>

      <div class="top-drop item-top-hover" :class="{ 'opacity-1': template.isExistCollection }">
        <!-- 收藏 -->
        <div v-if="thumbnailBase64">
          <div v-if="isActived == -2" class="more-btn">
            <span class="drop-menu" @mouseenter.stop="getDropMenu">
              <el-icon><MoreFilled /></el-icon>
              <!-- <i class="el-icon-more"></i> -->
            </span>
            <div class="drop-item" v-if="isShowDropMenu">
              <span @click="uploadLibrary(template)" class="span1"> 上传到公共库 </span>
              <span @click="deleteItem(template)" style="color: red" class="span2">删除</span>
            </div>
          </div>
          <div v-else>
            <el-icon v-if="template.isExistCollection" @click="collect(template)" style="color: #ffdc53; font-size: 20px"><StarFilled /></el-icon>
            <!-- <i v-if="template.isExistCollection" class="el-icon-star-on" @click="collect(template)"></i> -->
            <el-icon v-if="!template.isExistCollection" @click="collect(template)"><Star /></el-icon>
            <!-- <i v-if="!template.isExistCollection" class="el-icon-star-off" @click="collect(template)"></i> -->
          </div>
        </div>

        <div v-else class="more-btn">
          <span class="drop-menu" @mouseenter.stop="getDropMenu">
            <el-icon><MoreFilled /></el-icon>
            <!-- <i class="el-icon-more"></i> -->
          </span>
          <div class="drop-item" v-if="isShowDropMenu">
            <span @click="getCopy" class="span1"> <i class="el-icon-paperclip btn"></i>复制链接 </span>
            <span @click="getShare" class="span2"><i class="el-icon-share btn"></i>分享</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const { proxy } = getCurrentInstance() as any;
const emit: any = defineEmits(['collect', 'deleteItem', 'uploadLibrary', 'getPreview', 'getNextUse']);
const props = defineProps({
  template: {
    type: Object,
    default: () => {}
  },
  num: {
    type: Number,
    default: -1
  },
  thumbnailBase64: {
    type: Boolean,
    default: false
  },
  isActived: {
    type: Number,
    default: null
  }
});

const isShowDropMenu = ref(false);
const fileTypeList = ref({
  docx: 'Word',
  doc: 'Word',
  ppt: 'PPT',
  pptx: 'PPT',
  xlsx: 'Excel',
  xls: 'Excel'
});

const type = ref({});

const collect = (e) => {
  emit('collect', e, props.num);
};
// 删除
const deleteItem = (e) => {
  emit('deleteItem', e);
};

// 上传公共库
const uploadLibrary = (e) => {
  emit('uploadLibrary', e);
};
// 预览
const preview = (e) => {
  emit('getPreview', e);
};

// 使用
const getUse = (e) => {
  // 模板数据传给父组件
  emit('getNextUse', e);
};

// 下拉菜单打开
const getDropMenu = () => {
  isShowDropMenu.value = true;
};

const getMissDropMenu = () => {
  isShowDropMenu.value = false;
};

//分享
const getShare = () => {
  ElMessage.warning('当前功能暂未开放，请期待');
};

// 复制链接
const getCopy = () => {
  ElMessage.warning('当前功能暂未开放，请期待');
};

// 获取图标
const getFileType = (e) => {
  if (e && fileTypeList.value[e]) {
    // 判断 e 是否存在并且是否在 fileTypeList 列表中
    return fileTypeList.value[e];
  } else {
    return 'txt';
  }
};

/**icon转换 */
const selectSvgIcons = (v: any) => {
  return proxy.$yuUtils.selectSvgIcon(v);
};

//判断是否有值返回
// judgeNumber(val) {
//   var numReg = /^[0-9]*$/;
//   var numRe = new RegExp(numReg);
//   if (!numRe.test(val)) {
//     return false;
//   } else {
//     return true;
//   }
// }
</script>

<style scoped lang="scss">
.iconBox {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconClass {
  margin-top: -30px;
  font-size: 60px;
}

.document-items {
  margin: 0px 20px 20px 0px;
  // width: 23%;
}
.document-item {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 210px;
  height: 256px;
  // height: 256px;
  // min-width: 165px;
  max-width: 240px;
  box-shadow:
    rgba(31, 35, 41, 0.03) 0px 4px 16px 4px,
    rgba(31, 35, 41, 0.02) 0px 4px 8px 0px,
    rgba(31, 35, 41, 0.02) 0px 2px 4px -4px;
  cursor: pointer;
  background-color: white;
  transform: translateZ(1px);
  overflow: hidden;
  border-radius: 8px;
  transition:
    box-shadow 0.15s linear 0s,
    transform 0.15s linear 0s;

  .item-top {
    width: 201px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    transform: translateZ(0px);
    font-size: 18px;
    padding: 10px 12px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .top-left {
      // width: 180px !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .svg-icon {
        font-size: 18px;
      }
      .top-title {
        flex: 1 1 0%;
        margin-left: 6px;
        font-size: 15px;
        line-height: 24px;
        font-weight: 500;
        color: rgb(31, 35, 41);
      }
    }

    .top-drop {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      position: relative;
      .drop-menu {
        padding: 0px 5px;
        width: 25px;
        border: 1px solid #ccc;
        border-radius: 5px;
        line-height: 22px;
      }
    }
  }

  .item-img {
    position: relative;
    height: 100%;
    overflow: hidden;
    transform: translateZ(0px);
    border: 1px solid transparent;
    border-radius: 6px;
    position: relative;
    padding: 0px 12px;
    height: 182px;
  }
  .item-img::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0);
    // border: 1px solid red;
  }
  .item-bottom {
    position: relative;
    flex: 1 1 0%;
    .item-bottom-text {
      position: absolute;
      padding: 0px 12px;
      bottom: 8px;
      width: 100%;
      left: 0px;
      // display: flex;
      // justify-content: space-between;
      // -webkit-box-align: center;
      // align-items: center;
      transform: translateZ(0px);

      .bottom-text {
        font-size: 12px;
        line-height: 20px;
        color: rgb(100, 106, 115);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .bottom-department {
        font-size: 12px;
        line-height: 20px;
        color: rgb(100, 106, 115);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        // width: 123px;

        .bottom-department-text {
          font-weight: bold;
          font-size: 13px;
        }
        // border: 1px solid red;
      }
    }
    .item-bottom-btn {
      position: absolute;
      padding: 22px 12px 16px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      left: 0px;
      bottom: 0px;
      transform: translateY(10px) translateZ(0px);
      width: 100%;
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transition:
        transform 0.15s linear 0s,
        opacity 0.15s linear 0s;
      flex-wrap: wrap;
      gap: 10px 8px;
      .btn-preview {
        border-color: rgb(51, 109, 244);
        color: rgb(51, 109, 244);
      }
      .btn-preview:hover {
        background: rgb(240, 244, 255);
      }
      .btn-use {
        background: rgb(20, 86, 240);
        border-color: rgb(20, 86, 240);
        color: white;
      }
      .btn-use:hover {
        background: rgb(51, 109, 244);
        // border-color: rgb(51, 109, 244);
      }
    }
  }
  .top-drop {
    display: flex;
    position: absolute;
    padding: 12px;
    right: 0px;
    top: 0px;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: all 0.1s linear 0s;

    .more-btn {
      align-items: center;
      border: 1px solid rgb(208, 211, 214);
      border-radius: 6px;
      box-shadow:
        rgba(31, 35, 41, 0.03) 0px 4px 16px 4px,
        rgba(31, 35, 41, 0.02) 0px 4px 8px 0px,
        rgba(31, 35, 41, 0.02) 0px 2px 4px -4px;
      color: rgb(100, 106, 115);
      display: flex;
      font-size: 18px;
      height: 24px;
      justify-content: center;
      line-height: 24px;
      width: 24px;
    }
    .drop-item {
      position: absolute;
      // width: 200px;
      display: flex;
      flex-direction: column;
      top: 40px;
      background-color: white;
      right: 20px;
      border: 1px solid rgb(226, 226, 227);
      border-radius: 4px;
      padding: 2px 0px;
      font-size: 14px;
      color: #1f2329;
      span {
        display: block;
        margin: 1px 3px;
        width: 112px;
        padding: 8px 4px;
        line-height: 22px;
        font-weight: 400px;
        border-radius: 4px;
        .btn {
          padding: 0px 8px 0px 2px;
        }
      }
      .span1:hover {
        background-color: rgb(226, 226, 227);
      }
      .span2:hover {
        background-color: rgb(226, 226, 227);
      }
    }
  }
}

.document-items:hover .document-item {
  transform: translate3d(0px, -8px, 0px);
  box-shadow:
    rgba(31, 35, 41, 0.03) 0px 4px 16px 4px,
    rgba(31, 35, 41, 0.02) 0px 4px 8px 0px,
    rgba(31, 35, 41, 0.02) 0px 2px 4px -4px;
}
.document-items:hover .item-bottom .item-bottom-btn-hover {
  transform: translateY(0px) translateZ(0px);
  opacity: 1;
  pointer-events: auto;
}
.document-items:hover .item-bottom .item-bottom-text {
  opacity: 0;
  pointer-events: auto;
}
.opacity-1 {
  opacity: 1 !important;
}
.document-items:hover .document-item .item-top-hover {
  opacity: 1;
  pointer-events: auto;
}
</style>
<style>
.top-dropdown-item .el-dropdown-menu__item {
  line-height: 30px;
  padding: 2px 10px;
  font-size: 13px;
  width: 120px;
  margin: 0 2px;
  border-radius: 5px;
}

.top-dropdown-item .el-dropdown-menu__item:hover {
  background-color: rgb(237, 237, 238);
  /* color: rgb(50, 108, 242); */
}

.document-item .el-button–small {
  padding: 10px 30px;
  font-size: 14px;
  border-radius: 5px;
}
</style>
